
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft, ArrowRight } from '@nutui/icons-react'
import { useLocation, useNavigate } from 'react-router-dom';
import { http } from '../../utils'
import { Switch, ConfigProvider, Cell, Button, Notify } from '@nutui/nutui-react'
import { useEffect, useRef, useState } from 'react';
import useMessage from 'antd/es/message/useMessage';
import { GetVerifyPhone } from '../../module/Fun';
import { useSelector } from 'react-redux';
const AccountSafety = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const [userMessage, setUserMessage] = useState({})
    const createRef = useRef(false)

    const phone = useSelector((store) => store.carts.UserMessage.phone)
    useEffect(() => {
        if (!createRef.current) {
            getUserMessage()
            createRef.current = true
        }
    }, [])
    const getUserMessage = async () => {
        let res = await http.get('/main/userMessage')
        if (res.code == 200) {
            setUserMessage({ ...res.data })
        }
    }
    // 未写完，注销账号以及所有数据
    const onDelUser = async () => {
        localStorage.removeItem('accessToken')
        localStorage.removeItem('refreshToken')
        navigate('/loginCode')
    }


    const darkTheme = {
        nutuiNavbarBackground: '#f7f7f7',
        nutuiNavbarHeight: '0.5rem',
        nutuiButtonDefaultHeight: "0.5rem",
        nutuiCellLineHeight: "0.3rem",
        nutuiCellTitleFontSize: "0.16rem"
    };
    return (
        <div style={{ backgroundColor: "#f7f7f7", height: '100vh', }}>
            <ConfigProvider theme={darkTheme}>
                <div style={{paddingTop: '0.15rem' }}>
                    <NavBar
                        back={<ArrowLeft />}
                        onBackClick={(e) => navigate(-1)}
                    >
                        账户与安全
                    </NavBar>
                </div>
                <div style={{ marginTop: "0.6rem", padding: "0 0.2rem" }}>
                    <div>
                        <Cell.Group title={<span style={{ fontSize: "0.16rem", color: '#7e7e7e' }}>账户设置</span>}>
                            <Cell
                                className="nutui-cell-clickable"
                                title="手机号码"
                                align="center"
                                extra={<>{GetVerifyPhone(phone)}<ArrowRight /></>}
                                onClick={() => navigate('/outlet/getCodePassword', { state: { path: location.pathname } })}
                            />
                        </Cell.Group>
                    </div>
                    <div>
                        <Cell.Group title={<span style={{ fontSize: "0.16rem", color: '#7e7e7e' }}>第三方账号</span>}>
                            <Cell
                                className="nutui-cell-clickable"
                                title="微信"
                                align="center"
                                extra={<>未绑定 <ArrowRight /></>}
                                onClick={() => navigate('/outlet/selfMessage')}
                            />
                        </Cell.Group>
                    </div>
                    <div>
                        <Cell.Group title={<span style={{ fontSize: "0.16rem", color: '#7e7e7e' }}>安全设置</span>}>
                            {
                                (useMessage.password) ?
                                    <Cell
                                        className="nutui-cell-clickable"
                                        title="设置新登录密码"
                                        align="center"
                                        extra={<> <ArrowRight /></>}
                                        onClick={() => navigate('/outlet/putNewPassword')}
                                    /> :
                                    <>
                                        <Cell
                                            className="nutui-cell-clickable"
                                            title="修改登录密码"
                                            align="center"
                                            extra={<> <ArrowRight /></>}
                                            onClick={() => navigate('/outlet/putOldPassword')}
                                        />
                                        <Cell
                                            className="nutui-cell-clickable"
                                            title="忘记登录密码"
                                            align="center"
                                            extra={<> <ArrowRight /></>}
                                            onClick={() => navigate('/outlet/getCodePassword')}
                                        />
                                    </>
                            }
                            <Cell
                                className="nutui-cell-clickable"
                                title="注销账号"
                                align="center"
                                extra={<><span style={{ fontSize: "0.12rem" }}>注销后无法恢复，请谨慎操作</span> <ArrowRight /></>}
                                onClick={() => onDelUser()}
                            />
                        </Cell.Group>
                    </div>
                </div>
            </ConfigProvider >

        </div >
    )
}
export default AccountSafety;











